import { EChartColumnOption, EChartLineOption, LiTableOption, Reporting, TradeAnalysis } from "@/api/interface";
import { GetBusinessDaySummary, GetTradeAnalysis } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { Delete, Search } from "@element-plus/icons-vue";
import LiLineChart from "@/components/LiLineChart";
import LiTable from "../../components/LiTable";
import LiColumnChart from "@/components/LiColumnChart";
import { TabsPaneContext } from "element-plus";

declare type param = {
  dataTimeRange: string[];
};

export default defineComponent({
  name: "BusinessDaySummary",
  setup: function (): () => JSX.Element {
    /* data */
    let param = ref<param>({
      dataTimeRange: [formatDate(-6, "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")]
    });

    let dataReport = ref<Reporting.BusinessDaySummary>();

    const activeName = ref("first");

    let tableOption1 = reactive<LiTableOption>({
      data: [],
      maxHeight: 640,
      columns: [
        {
          sortable: true,
          prop: `name`,
          label: `统计项`
        },
        {
          sortable: true,
          prop: `amount`,
          label: `金额`
        }
      ]
    });

    let tableOption2 = reactive<LiTableOption>({
      data: [],
      maxHeight: 640,
      columns: [
        {
          sortable: true,
          prop: `name`,
          label: `名称`
        },
        {
          sortable: true,
          prop: `count`,
          label: `数量`
        },
        {
          sortable: true,
          prop: `amount`,
          label: `金额`
        }
      ]
    });

    let tableOption3 = reactive<LiTableOption>({
      data: [],
      maxHeight: 640,
      columns: [
        {
          sortable: true,
          prop: `name`,
          label: `名称`
        },
        {
          sortable: true,
          prop: `count`,
          label: `数量`
        },
        {
          sortable: true,
          prop: `amount`,
          label: `金额`
        }
      ]
    });

    let tableOption4 = reactive<LiTableOption>({
      data: [],
      maxHeight: 640,
      columns: [
        {
          sortable: true,
          prop: `name`,
          label: `名称`
        },
        {
          sortable: true,
          prop: `count`,
          label: `数量`
        },
        {
          sortable: true,
          prop: `amount`,
          label: `金额`
        }
      ]
    });
    let tableOption5 = reactive<LiTableOption>({
      data: [],
      maxHeight: 640,
      columns: [
        {
          sortable: true,
          prop: `name`,
          label: `名称`
        },

        {
          sortable: true,
          prop: `amount`,
          label: `金额`
        }
      ]
    });

    /* methods */
    const GetPageData: () => void = async () => {
      dataReport.value = (await GetBusinessDaySummary(param.value)).data;
      const list = dataReport.value.list;
      console.log("list->", list);
      tableOption1.data = list.comsumeSummary;
      tableOption2.data = list.bigCategorySummary;
      tableOption3.data = list.smallCategorySummary;
      tableOption4.data = list.incomeSummary;
      tableOption5.data = list.userSummary;
    };
    const search: () => void = async () => {
      await GetPageData();
    };

    async function reset(): Promise<void> {
      (param.value.dataTimeRange = [formatDate(-6, "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")]), GetPageData();
    }

    /* life circle */
    onMounted(async function (): Promise<void> {
      await GetPageData();
    });

    /* html */
    return function (): JSX.Element {
      return (
        <>
          <div class="trade-analysis-container">
            <div style="margin-bottom: 10px" class="card table-box">
              <el-form inline={true} model={param} style="padding-top: 10px;margin-bottom:-10px">
                <el-form-item label="日期：">
                  <el-date-picker
                    v-model={param.value.dataTimeRange}
                    type="daterange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    format="YYYY-MM-DD"
                    date-format="YYYY/MM/DD"
                    clearable={false}
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon={Search} onClick={search}>
                    搜索
                  </el-button>
                  <el-button icon={Delete} onClick={reset}>
                    重置
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-card style="height:710px">
              <el-tabs
                v-model={activeName}
                onTabClick={(tab: TabsPaneContext, event: Event) => {
                  console.log(tab, event);
                }}
              >
                <el-tab-pane label="消费统计" name="first">
                  <LiTable maxHeight={tableOption1.maxHeight} data={tableOption1.data} columns={tableOption1.columns} />
                </el-tab-pane>
                <el-tab-pane label="商品大类统计" name="second">
                  <LiTable maxHeight={tableOption2.maxHeight} data={tableOption2.data} columns={tableOption2.columns} />
                </el-tab-pane>
                <el-tab-pane label="商品小类统计" name="third">
                  <LiTable maxHeight={tableOption3.maxHeight} data={tableOption3.data} columns={tableOption3.columns} />
                </el-tab-pane>
                <el-tab-pane label="收银统计" name="fourth">
                  <LiTable maxHeight={tableOption4.maxHeight} data={tableOption4.data} columns={tableOption4.columns} />
                </el-tab-pane>
                <el-tab-pane label="会员操作统计" name="fifth">
                  <LiTable maxHeight={tableOption5.maxHeight} data={tableOption5.data} columns={tableOption5.columns} />
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </div>
        </>
      );
    };
  }
});
